<template>
  <!-- 时间选择器 -->
  <div class="pho-form-item">
    <van-field
      :value="value"
      v-bind="$attrs"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      input-align="right"
      :is-link="!isTop"
      readonly
      @click="onClick"
      @clear.stop
    />
    <TimePicker
      ref="TimePicker"
      :minTime="minTime"
      :maxTime="maxTime"
      :format="$attrs.format"
      @callBack="onConfirm"
    />
  </div>
</template>

<script>
import TimePicker from "./components/timePicker.vue";

export default {
  name: "phone-form-time-picker",
  components: {
    TimePicker,
  },
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: [String, Array],
      default: "",
    },
    // 是否为上下布局
    isTop: {
      type: Boolean,
      default: false,
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formValue: "",
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.formValue = newValue || "";
      },
    },
  },
  computed: {
    // 获取时间范围
    selectableRange() {
      let selectableRange = this.$attrs.pickerOptions?.selectableRange || "";
      let rangeArray = selectableRange.split("-");
      return rangeArray;
    },
    // 可选择的最小时间，格式为 10:00 不包括秒
    minTime() {
      return this.selectableRange[0];
    },
    // 可选择的最大时间，格式为 10:00 不包括秒
    maxTime() {
      return this.selectableRange[1];
    },
  },
  methods: {
    onClick() {
      if (this.$attrs.disabled || this.$attrs.readonly) return;
      this.$refs.TimePicker.open(this.formValue);
    },
    onConfirm(val) {
      this.$emit("update", val);
    },
  },
};
</script>

<style lang="scss" scoped></style>
